<template>
    <div id="FollowStudentInfo">
        <!--跟踪已经入班的学生信息 -->
        <table class="table table-bordered">
            <tbody>
                <tr><th colspan="6" style="text-align:center;font-weight:900">{{studentInfo.name}}跟踪信息</th></tr>
                <tr>
                    <td>姓名</td>
                    <td>{{studentInfo.name}}</td>
                    <td>班级</td>
                    <!-- <td>{{convertClassName(studentInfo.classId)}}</td> -->
                    <td>{{convertClassName(studentInfo.classId)}}</td>
                    <td>年龄</td>
                    <td>{{studentInfo.age}}</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>{{studentInfo.gender?'男':'女'}}</td>
                    <td>联系电话</td>
                    <td>{{studentInfo.mobile}}</td>
                    <td>qq</td>
                    <td>{{studentInfo.qq}}</td>
                    
                </tr>
                <tr>
                    <td>学分</td>
                    <td>
                        <button class="circleButton minus" @click="creditEditVisible=true,creditTitle='减分操作'">-</button>
                          {{studentInfo.credit}}
                        <button class="circleButton plus" @click="creditEditVisible=true,creditTitle='加分操作'">+</button> 
                    </td>
                    <td>微信</td>
                    <td>{{studentInfo.wx}}</td>
                    <td>学历</td>
                    <td>{{studentInfo.education |filterEducation}}</td>
                </tr>
                <tr>
                    <td>社招</td>
                    <td></td>
                    <td>口碑</td>
                    <td>{{studentInfo.reputationId}}</td>
                    <td>渠道</td>
                    <td>{{studentInfo.channelId}}</td>
                </tr>
                <tr>
                    <td>一阶段</td>
                    <td></td>
                    <td>二阶段</td>
                    <td></td>
                    <td>三阶段</td>
                    <td></td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="5">
                        {{studentInfo.remark}}
                    </td>
                </tr>
                <tr>
                    <td rowspan="">谈话原因</td>
                    <td colspan="5">
                        <tr >
                            <td>
                                <el-input v-model="talk.cause" placeholder="请输入内容" style="min-width:500px"></el-input>
                            </td>
                        </tr>
                    </td>
                </tr>
                <tr>
                    <td rowspan="">老师谈话</td>
                    <td colspan="5">
                        <tr >
                            <td>
                                <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="talk.content"
                                resize='none'
                                style="min-width:500px"
                                >
                                </el-input>
                            </td>
                        </tr>
                    </td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align:right">
                        <el-button type="danger">失联</el-button>
                        <el-button type="danger" @click="quitVisible=true,exceptionTitle='退学'">退学</el-button>
                        <el-button type="danger" @click="quitVisible=true,exceptionTitle='休学'">休学</el-button>
                        <el-button type="danger" @click="stepIntoClassVisible=true,cityId='',campusId='',classId=''">转班</el-button>
                        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
                        <el-button type="primary" @click="updateInfo">更新</el-button>

                    </td>
                </tr>
             </tbody>
        </table>
         <tr>
            <th style="font-weight:900">谈话历史记录</th>
        </tr>
        <table class="table table-bordered">
            <tr v-for="(item,key) in talkHistory" :key="key" class="talkList">
                <td>
                    <table class="table table-bordered">
                           <tr style="font-size:14px"><td style="display:flex;justify-content:space-between"><span>{{item.cause}}</span><span>{{item.talkTime}}</span></td></tr>
                            <tr style="font-size:14px;"><td>{{item.content}}</td></tr>
                    </table>
                </td>
            </tr>
        </table>
         <!-- 入班操作 -->
        <el-dialog
            title="转班"
            :visible.sync="stepIntoClassVisible"
            width="50%"
            :before-close="handleClose"
            class="stepDialog"
            >
            <table class="table table-bordered ">
                <tbody>
                    <tr>
                        <td>城市</td>
                        <td>
                            <el-select @click.native="loadCityWithType('city')" v-model="cityId" style="width:100%">
                                <el-option v-for="(item,key) in cityList" :key="key" :label="item.cityName" :value="item.id"></el-option>
                            </el-select>
                        </td>
                        <td>校区</td>
                        <td>
                            <el-select @click.native="loadAllCampusByCityId(cityId)" v-model="campusId" style="width:100%">
                                <el-option  v-for="(item,key) in campusList" :key="key" :label="item.campusName" :value="item.id"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>班级</td>
                        <td>
                            <el-select @click.native="loadAllClassByCampusId" v-model="classId" style="width:100%">
                                <el-option  v-for="(item,key) in classList" :key="key" 
                                :label="item.className" 
                                :value="item.id"></el-option>
                            </el-select>
                        </td>
                        <td>类型</td>
                        <td>
                            <el-select v-model="studentException.etype" style="width:100%">
                                <el-option v-for="(item,key) in etypes" 
                                    :key="key"
                                    :label="item.title"
                                    :value="item.etype"
                                ></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>原因</td>
                        <td colspan="4">
                            <el-input type="text-area" v-model="studentException.cause"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td colspan="4">
                            <el-input type="text-area" v-model="studentException.remark"></el-input>
                        </td>
                    </tr>
                </tbody>
            </table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="stepIntoClassVisible = false">取 消</el-button>
                <el-button type="primary" @click="insertStudentIntoClass()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 退学操作 -->
        <el-dialog
            :title="exceptionTitle"
            :visible.sync="quitVisible"
            width="30%"
            :before-close="handleClose">
                <input :name="exceptionTitle+'原因'" v-model="studentException.cause" v-validate="'required'"
                 :class="{'input': true, 'is-danger': errors.has(exceptionTitle+'原因') }" 
                 type="text" :placeholder="exceptionTitle+'原因'"
                 style="margin-bottom:20px"
                 >
                <i v-show="errors.has(exceptionTitle+'原因')" class="fa fa-warning"></i>
                <span v-show="errors.has(exceptionTitle+'原因')" class="help is-danger">{{ errors.first(exceptionTitle+'原因') }}</span>
                
                <input name="备注" v-model="studentException.remark" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('备注') }" type="text" placeholder="备注">
                    <i v-show="errors.has('备注')" class="fa fa-warning"></i>
                    <span v-show="errors.has('备注')" class="help is-danger">{{ errors.first('备注') }}</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="quitVisible = false">取消</el-button>
                <el-button @click="quit">确定</el-button>
            </span>
        </el-dialog>
        <!-- 减分加分操作 -->
        <el-dialog
        :title="creditTitle"
        :visible.sync="creditEditVisible"
        width="30%"
        :before-close="handleClose"
        >
         <table class="table table-bordered">
             <tbody>
                <tr>
                    <td>分数</td>
                    <td>
                        <el-input v-model.number="credit" v-validate="'credit'" name="分数"></el-input>
                         <i v-show="errors.has('分数')" class="fa fa-warning"></i>
                        <span v-show="errors.has('分数')" class="help is-danger">{{ errors.first('分数') }}</span>
                    </td>
                </tr>
                <tr>
                    <td>原因</td>
                    <td>
                        <el-input v-model="studentException.cause"></el-input>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                        <el-input v-model="studentException.remark"></el-input>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <el-button type="danger" @click="handleClose">取消</el-button>
                        <el-button type="primary" @click="changeCredit">确定</el-button>
                    </td>
                </tr>                
             </tbody>
         </table>
        </el-dialog>
    </div>
</template>

<script>
    import cityMixin from '@/Mixins/cityCampusMixin'

    export default {
        mixins: [cityMixin],
        data(){
            return {
                creditEditVisible: false,
                credit: 0, //加减的分数项
                creditTitle: '加分操作',
                studentException: {
                    cause: '',//异常原因
                    remark: '',//备注
                    etype: 3, //留级或转班
                },
                etypes: [
                    {
                        title: '转班',
                        etype: 3 
                    },
                    {
                        title: '留级',
                        etype: 4
                    }
                ],
                studentInfo: {},
                stepIntoClassVisible: false,
                talk: {
                    content: '',
                    cause: '',
                    token: this.$token
                },
                talkHistory: [],
                quitVisible: false,//是否显示退学弹框
                exceptionTitle: '',//异常标题
            }
        },
        filters: {
            filterEducation(value){
                var kvalue= '';
                var educations = JSON.parse(localStorage.getItem('education'));
                educations.forEach((item)=>{
                    if(value==item.kkey){
                        kvalue = item.kvalue;
                        return;
                    }
                })
                return kvalue;
            }
        },
        methods: {
            updateInfo(){
                var checkDataArr = ['content','cause'];
                var isGoon = this.checkData(checkDataArr,this.talk);
                var talkURL = window.baseURL + "/backstage/classStudent/talk"
                if(isGoon){
                    this.$http.post(talkURL,this.$qs.stringify({'talk.content':this.talk.content,
                                                                'talk.cause':this.talk.cause,
                                                                token: this.$token,
                                                                'student.id': this.studentInfo.id
                                                                }))
                    .then((response)=>{
                        this.talk.content = '';
                        this.talk.cause = '';

                        this.loadData();
                    })
               }
            },
            // 转班
            insertStudentIntoClass(){
                // backstage/classStudent/moveBatch
                // var chooseClassURL = window.baseURL + "/backstage/classStudent/moveBatch";
                var chooseClassURL = window.baseURL + "/backstage/classStudent/downNext";
                var checkedDdataArra = ['etype','cause','remark'];
                var goon = this.checkData(checkedDdataArra,this.studentException);
                if(!goon){
                  
                    return;
                }
                var stepIntoClassStudentId = JSON.parse(localStorage.getItem('currentStudent')).id
                let action = ()=>{
                    this.$http.post(chooseClassURL,this.$qs.stringify({ 'student.id':stepIntoClassStudentId,
                                                                        token:this.$token,
                                                                        class_id: this.classId,
                                                                        'studentException.etype': this.studentException.etype,
                                                                        'studentException.cause': this.studentException.cause,
                                                                        'studentException.remark': this.studentException.remark,
                                                                        }))
                    .then((response)=>{
                        if(response.data.success){
                            this.$message({
                                message: response.data.message,
                                type: 'success'
                            });
                            this.stepIntoClassVisible = false;
                            this.$router.go(-1);
                        }else{
                            this.$message.error(response.data.message);
                        }
                    })
                }
                this.operatorConfirm(action,'学生入班'); 
            },
            loadData(){
                  this.studentInfo = JSON.parse(localStorage.getItem('currentStudent'));
                // 获取谈话记录/backstage/classStudent/getTalk
                var talkURL = window.baseURL + '/backstage/classStudent/getTalk?token='+this.$token+"&student.id="+this.studentInfo.id;
                this.$http.get(talkURL)
                .then((response)=>{
                    this.talkHistory = response.data.data;
                })
            },
            changeCredit(){
                /**
                    student.id:学生Id,
                    student.credit:扣除分数
                    studentException.cause : 扣分原因
                    studentException.remark:备注
                */
                /*
                    满分100
                    最低分:0
                    判断扣除的成绩是否低于0分
                    加分是否超过100分
                */
                
               
                var checkedDdataArra = ['cause','remark'];
                var goon = this.checkData(checkedDdataArra,this.studentException);
                 if(!goon){
                    return;
                }
                var url = ''
                if(this.creditTitle=="加分操作"){
                    url = window.baseURL + '/backstage/classStudent/increase';
                     if(this.studentInfo.credit+this.credit>100){
                        this.$alert('所加分数不能大于100分', '无法提交', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                type: 'info',
                                message: `action:修改分数失败`
                                });
                            }
                        });
                        return;
                    }
                }
                if(this.creditTitle == "减分操作"){
                    url = window.baseURL + '/backstage/classStudent/decrease';
                    if(this.studentInfo.credit-this.credit<0){
                    this.$alert('所减分数不能大于当前有用分数', '无法提交', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                            type: 'info',
                            message: `action:修改分数失败`
                            });
                        }
                    });
                    return;
                }
                }
                var action = ()=>{
                    this.$http.post(url,this.$qs.stringify({'student.id':this.studentInfo.id,
                                                            'student.credit':this.credit,
                                                            'studentException.cause': this.studentException.cause,
                                                            'studentException.remark': this.studentException.remark,
                                                            'token': this.$token
                                                            }))
                    .then((response)=>{
                        if(response.data.success){
                            this.$message({
                                type: 'success',
                                message: `action: ${ response.data.message }`
                            });
                            this.creditEditVisible = false;
                            this.$router.go(-1);
                        }
                    })
                    .catch((error)=>{
                    })
                }
                this.operatorConfirm(action,this.creditTitle);
            },
            //退学
            quit(){
                ///backstage/classStudent/quit
                var quitURL = '';
                switch(this.exceptionTitle){
                    case '退学': 
                        quitURL = window.baseURL+ '/backstage/classStudent/quit'
                        break;
                    case '休学':
                        quitURL = window.baseURL + '/backstage/classStudent/pause'
                        break;
                }
                var checkedDdataArra = ['cause','remark'];
                var goon = this.checkData(checkedDdataArra,this.studentException);
                if(!goon){
                    return;
                }
                var action = ()=>{
                    this.$http.post(quitURL,this.$qs.stringify({'studentException.case': this.studentException.cause,
                                                                'studentException.remark': this.studentException.remark,
                                                                token:this.$token,
                                                                'student.id':this.studentInfo.id}))
                    .then((response)=>{
                        if(response.data.success){
                            this.$message({
                                type: 'success',
                                message: `action: ${ response.data.message }`
                            });
                            this.quitVisible = false;
                            this.$router.go(-1);
                        }
                    })
                    .catch((error)=>{
                    })
                }
                this.operatorConfirm(action,this.exceptionTitle);
            },
            handleClose(){
                this.studentException.cause = '';
                this.studentException.remark = '';
                this.creditEditVisible = false;
                this.stepIntoClassVisible = false;
                this.quitVisible = false;
            }
        },
        created(){
            this.loadAllClassByCampusId();
            this.loadData();
        },
        beforeRouteLeave (to, from, next) {
            localStorage.removeItem("currentStudent");
            next();
        }
    }
</script>

<style lang="scss" scoped>
    #FollowStudentInfo {
        left:0;
        right: -15px;
        height: 100%;
        padding: 50px;
        box-sizing: border-box;
        position: absolute;
        overflow-y:scroll;
    }
    .talkList {
        width: 100%;
        min-height: 150px;
        border: 1px solid lightgray;
    }
    .stepIntoClassDialog {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom:20px;
        
    }
    .stepDialog {
        table {
            text-align: center;
            tr {
                td {
                    vertical-align: middle;
                    &:nth-child(2n){
                        text-align: left
                    }
                }
            }
        }        
    }
    .circleButton {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        outline: none;
        border: none;
    }
    .minus {
        border: 1px solid #fbc4c4;
        background-color: #fef0f0;
        color: #f56c6c;
        &:active {
            background-color: #f56c6c
        }
        &:hover {
            background: #f56c6c;
            color: white
        }
    }
    .plus {
        color: #409eff;
        border: 1px solid #b3d8ff;
        background: #ecf5ff;
         &:active {
            background-color: #409eff
        }
        &:hover {
            background: #409eff;
            color: white
        }
    }
</style>
